<template>
  <div class="FirstDay">
    <div class="headerView">
      <p style="color: white;font-size: 26px;font-weight: 900;">{{item.title}}</p>
      <!-- 收起 按钮 -->
      <el-button type="primary" plain v-on:click="closed(item)" size="mini">
        {{item.closed?"收起":"展开"}}
        <i :class="item.closed?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
      </el-button>
    </div>
    <!-- 内容部分 -->
    <div class="contentView" v-if="item.closed" :style="'background:'+ bargundColor">
      <FirstDayComponent v-if="index == 0"></FirstDayComponent>
      <SecondDay v-if="index == 1" v-on:changeBargundColor="changeColor($event)"></SecondDay>
      <thirdDay v-if="index == 2"></thirdDay>
      <FourthDay v-if="index == 3"></FourthDay>
      <Registered v-if="index == 4"></Registered>
      <iViewFirstDya  v-if="index == 5"></iViewFirstDya>
    </div>
  </div>
</template>

<script>
/**
 * 传值： 基本数据类型
 * 引用： 数组 和 对象
 * */

import FirstDayComponent from "./FirstDayComponent";
import SecondDay from "./SecondDay";
import thirdDay from "./ThirdDay";
import FourthDay from "./FourthDay"
import Registered from "./Registered"
import iViewFirstDya from "./iViewFirstDya"

export default {
  name: "FirstDay",
  components: {
    FirstDayComponent,
    SecondDay,
    thirdDay,
    FourthDay,
    Registered,
    iViewFirstDya
  },
  props: {
    item: {
      title: String,
      closed: Boolean
    },
    index: Number
  },
  data() {
    return {
      bargundColor: "#fff"
    };
  },
  created() {},
  methods: {
    // 收起列表
    closed: function(el) {
      el.closed = !el.closed;
    },
    // 改变内容背景色
    changeColor: function(color) {
      this.bargundColor = color;
    }
  }
};
</script>

<style scoped>
.FirstDay {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.headerView {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80vw;
}
.closedButton {
  height: 30px;
}

.contentView {
  width: 70vw;
  padding: 20px 20px 20px 20px;
  margin-bottom: 50px;
}
</style>

<style>
.componetsMintitle {
  width: 70vw;
  color: gray;
  font-size: 1.5rem;
  text-align: left;
}
</style>
